<template>
  <div class="app-flow-container">
    <div style='position: relative;'>
      <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <el-tab-pane name="1">
          <template #label>
              <span class="custom-tabs-label">
                <i class="element-icons el-icon-form"></i>
                <span>表单信息</span>
              </span>
          </template>
          <el-col :span="16" :offset="4">
            <div v-for="(form, index) in flowForms" :key="index">
              <v-form-render v-if="form.formType === 'online'" ref="vFormRef"/>
              <component v-else :is="form.formContent" ref="vFormRef"/>
            </div>
         </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
        <el-tab-pane name="2">
          <template #label>
              <span class="custom-tabs-label">
                <i class="element-icons el-icon-flow-record"></i>
                <span>流转记录</span>
              </span>
          </template>
          <flow-record v-if="flowRecordOpen" :flowRecordList="flowRecordList" />
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane name="3">
          <template #label>
              <span class="custom-tabs-label">
                <i class="element-icons el-icon-flow"></i>
                <span>流程图</span>
              </span>
          </template>
          <bpmn-viewer v-if="flowDataOpen" :flowData="flowData" :procInsId="taskForm.procInsId"/>
        </el-tab-pane>
    </el-tabs>
      <el-button v-if="flowTaskData.revokeTask && !flowTaskData.refill" style='position: absolute;right:70px;top:5px;' size="small" type="danger" @click="handleTaskRecall">撤回</el-button>
      <el-button v-if="flowTaskData.revokeTask" style='position: absolute;right:155px;top:5px;' size="small" type="danger" @click="handleTaskRevoke">撤销</el-button>
      <el-button v-if="flowTaskData.finishTime == null" style='position: absolute;right:70px;top:5px;' size="small" type="danger" @click="handleCancelTask">取消申请</el-button>
      <el-button style='position: absolute;right:10px;top:5px;' size="small" type="info" @click="handlePrint">打印</el-button>
    </div>

    <!--打印预览-->
    <el-dialog
        v-model="printVisible"
        title="打印预览"
        width="70%"
    >
      <printer v-if="printVisible" :printData="printData"></printer>
    </el-dialog>
  </div>
</template>

<script setup name="ProcessDetail">
import {getRecordList, taskRecall, taskRevoke} from "@/api/flowable/finished";
import { updateCopy } from "@/api/flowable/copy";
import {cancelTask} from "@/api/flowable/process";
import {getProcessDetail, flowXmlAndNode} from "@/api/flowable/definition";
import BpmnViewer from '@/components/Process/viewer';
import Printer from '@/components/Process/printer';
import FlowRecord from "@/components/Process/record";

const route = useRoute();
const { proxy } = getCurrentInstance();

// 模型xml数据
const flowData = ref({});
const flowReturnData = ref({});
// 切换tab标签
const activeName = ref('1');
const flowRecordOpen = ref(false);
const flowDataOpen = ref(false);

// 遮罩层
const loading = ref(true);
// 流程流转数据
const flowRecordList = ref([]);
// 表单内容
const flowForms = ref([]);
// 表单json
const formJson = ref({});
// 表单渲染器
const vFormRef = ref(null);
// 打印预览
const printVisible = ref(false);

/** 组件传值  */
const props = defineProps({
  // 回显数据传值
  flowTaskData: {
    type: Object,
    default: null,
    required: false
  },
});


const data = reactive({
  // 查询参数
  taskForm: {
    multiple: false,
    comment: "", // 意见内容
    procInsId: "", // 流程实例编号
    executionId: "", // 任务执行ID
    instanceId: "", // 流程实例编号
    deployId: "",  // 流程定义编号
    taskId: "",// 流程任务编号
    procDefId: "",  // 流程编号
    procDefName: "",  // 流程名称
    id: null,
    status: null,
  },
  printData: {}
});

const {taskForm, printData} = toRefs(data);


/** 传值监听 */
watch(() => props.flowTaskData, newValue => {
      if (newValue) {
        taskForm.value = newValue;
        // 流程任务重获取变量表单
        processDetail()
        // 更新抄送任务状态
        updateCopyTaskStatus();
        printData.value.procInsId = taskForm.value.procInsId;
      }
    }, {immediate: true}
);

/** tab点击 */
function handleClick(tab, event) {
  if (tab.props.name === '2') {
    // 切换tab时避免重复请求接口
    if (!flowRecordOpen.value) {
      getFlowRecordList();
    }
  } else if (tab.props.name === '3') {
    if (!flowDataOpen.value) {
      flowDataOpen.value = true;
      flowXmlAndNode(taskForm.value).then(res => {
        flowData.value = res.data;
      })
    }
  }
}

/** 流程流转记录 */
function getFlowRecordList() {
  getRecordList(taskForm.value).then(res => {
    flowRecordList.value = res.data.flowList;
    flowRecordOpen.value = true;
  })
}

/** 获取流程变量内容 */
function processDetail() {
  if (taskForm.value.procInsId) {
    // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    getProcessDetail(taskForm.value).then(res => {
      // 保存打印数据
      printData.value.flowForms = res.data.flowForms;
      printData.value.formData = res.data.flowData;
      flowForms.value = res.data.flowForms;

      const flowFormData = res.data.flowData;
      proxy.$nextTick(() => {
        flowForms.value.forEach((form, index) => {
          // 回显在线表单
          if (form.formType === "online") {
            loadOnlineForm(index, form, flowFormData);
          } else {
            // 回显路由表单
            proxy.$nextTick(() => {
              vFormRef.value[index].setFormData(flowFormData, true);
            })
          }
        })
      })
    })
  }
}

// 加载动态表单
function loadOnlineForm(index, form, flowFormData) {
  const formRef = vFormRef.value[index];
  formRef.setFormJson(form.formContent);
  proxy.$nextTick(() => {
    formRef.setFormData(flowFormData);
    formRef.disableForm();
  });
}

/** 更新抄送任务状态 */
function updateCopyTaskStatus() {
  if (taskForm.value.status === 0) {
    taskForm.value.status = 1;
    updateCopy(taskForm.value).then(res => {
  
    })
  }
}

/** 打印预览 */
function handlePrint() {
  printData.value.procDefName = taskForm.value.procDefName;
  printVisible.value = true;
}

/**  取消流程申请 */
function handleCancelTask() {
  proxy.$confirm('是否确认取消当前流程任务申请?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    cancelTask(taskForm.value).then(res => {
      proxy.$modal.msgSuccess(res.msg);
    });
  })
}

/** 撤回任务-下一任务未办理前撤回，流程回到上一节点 */
function handleTaskRecall() {
  proxy.$confirm('是否确认撤回任务重新办理?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    taskRecall(taskForm.value).then(res => {
      proxy.$modal.msgSuccess(res.msg);
    });
  })
}

/** 撤销任务-申请人执行，撤销后流程回到申请人节点可重新发起任务 */
function handleTaskRevoke() {
  proxy.$confirm('是否确认撤销任务重新提交申请?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    taskRevoke(taskForm.value).then(res => {
      proxy.$modal.msgSuccess(res.msg);
    });
  })
}

/** 关闭当前标签页并返回上个页面 */
function goBack() {
  const obj = {path: "/task/mine", query: {t: Date.now()}};
  proxy.$tab.closeOpenPage(obj);
}

</script>
<style lang="scss" scoped>
.box-card {
  width: 100%;
}
.my-label {
  background: #E1F3D8;
}
.app-flow-container{
  padding: 10px;
}

.custom-tabs-label .element-icons {
  vertical-align: middle;
}
.custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
